<template>
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize"
        :close-on-click-modal="isReadOnly" custom-class="zs-drawer-custom">
        <template #header="{ titleId, titleClass }">
            <div class="zs-drawer-header" :id="titleId" :class="titleClass">
                <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
                <div class="zs-title zs-text-black">说明</div>
            </div>
        </template>
        <template #default>
            <div class="zs-drawer-container zs-layout-flex-col">
                <el-input class="zs-layout-grow dashboard-projectAllListDesDialog-input" :class="{'dashboard-projectAllListDesDialog-input-disabled': !isEditing}" v-model="des" type="textarea"
                    placeholder="" :disabled="!isEditing" />
                <div class="zs-layout-flex-row zs-layout-justify-end zs-space-top-bg"
                    v-btnPermi="{ permi: 'p_btn_903_wuyexiangmu_wuyehuizong_bianji', noReport: true, isHiden: true }">
                    <el-button class="zs-btn-md zs-btn-primary" @click="edit()"
                        v-btnPermi="{ permi: 'p_btn_903_wuyexiangmu_wuyehuizong_bianji', isHiden: true }"
                        v-if="!isEditing">编辑</el-button>
                    <el-button class="zs-btn-md zs-btn-primary" @click="confirmClick()" v-if="isEditing">保存</el-button>
                </div>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import projectListApi from '@/api/Property/projectList'

let store = useStore()
const curDrawerSize = ref(store.state.uiDrawerSize)
const props = defineProps({
    isShow: { type: Boolean, default: false },
    projectCode: { type: String, default: '' },
    isReadOnly: { type: Boolean, default: false },
})
const emit = defineEmits(['close'])
const isShowDrawer = ref(props.isShow)
// 关闭drawer
const handleClose = (done) => {
    emit('close', { isShow: false })
    done()
}
const cancelClick = () => {
    isShowDrawer.value = false
    emit('close', { isShow: false })
}
const des = ref('')
const id = ref('')
const isEditing = ref(false)

const edit = () => {
    isEditing.value = true
}

const confirmClick = () => {
    projectListApi.propertyProjectExplainSaveApi({ projectCode: props.projectCode, description: des.value, id: id.value }).then((res) => {
        if (res.data.code == 200) {
            cancelClick()
        }
    })
}

const getDes = () => {
    projectListApi.propertyProjectExplainQueryApi({ projectCode: props.projectCode }).then((res) => {
        if (res.data.code == 200) {
            des.value = res.data.data.description
            id.value = res.data.data.id
        }
    })
}
getDes()

</script>

<style lang="scss">
.dashboard-projectAllListDesDialog-input .el-textarea__inner {
    height: 100% !important;
    width: 100% !important;
    background: #f5f7fe;
}
.dashboard-projectAllListDesDialog-input-disabled .el-textarea__inner {
    background-color: #ffffff !important;
}
</style>

<style scoped lang="scss"></style>
